<template>
  <v-app-bar :elevation="0" class="!z-[1] my-app-bar" :class="{
    'h-[72px]': mobile == false,
    'h-[56px]': mobile == true,
    'my-app-bar-mobile': mobile == true
  }">

    <!-- 左侧 -->
    <template v-slot:prepend>

      <!-- 图标 -->
      <v-app-bar-nav-icon size="32" v-if="mobile" @click="handleNavIconClick"></v-app-bar-nav-icon>

      <!-- 搜索按钮 -->
      <searchBtn class="mr-4" v-if="mobile == false"></searchBtn>

      <!-- 面包屑导航 -->
      <breadcrumbs v-if="mobile == false"></breadcrumbs>
    </template>


    <!-- 标题 -->
    <!-- <v-app-bar-title>Application Bar</v-app-bar-title> -->

    <!-- 右侧 -->
    <template v-slot:append>

      <!-- 国际化切换 -->
      <langChangeBtn :class="{
        'mr-6': mobile == false,
        'mr-2': mobile == true
      }"></langChangeBtn>

      <!-- 通知 -->
      <noticeBtn :class="{
        'mr-6': mobile == false,
        'mr-2': mobile == true
      }"></noticeBtn>

      <!-- 主题明暗切换 -->
      <themeLightDark :class="{
        'mr-6': mobile == false,
        'mr-2': mobile == true
      }"></themeLightDark>

      <!-- 名称/描述 -->
      <userInfo v-if="mobile == false"></userInfo>

    </template>

  </v-app-bar>
</template>

<script setup lang="ts">
import langChangeBtn from '../components/langChangeBtn.vue';
import searchBtn from '../components/searchBtn.vue';
import noticeBtn from '../components/noticeBtn.vue';
import userInfo from '../components/userInfo.vue';
import breadcrumbs from '../components/breadcrumbs.vue';
import themeLightDark from '../components/themeLightDark.vue';

import { useDisplay } from 'vuetify'
const { mobile } = useDisplay()
import { useCurrentInstance } from "@Hooks/index.ts";
const proxy = useCurrentInstance().proxy;

/**
 * 点击左上角的菜单图标
 */
function handleNavIconClick() {
  proxy.$bus.emit("appLeftMenu", { method: "toggle" })
}
</script>

<style scoped>
.my-app-bar :deep(.v-toolbar__content) {
  height: 100% !important;
  margin-left: 24px;
  margin-right: 24px;
  width: calc(100% - 48px);
  border-bottom: 1px solid rgb(var(--v-theme-divider));
  padding-left: 16px;
  padding-right: 16px;
}

.my-app-bar.my-app-bar-mobile :deep(.v-toolbar__content) {
  margin-left: 8px;
  margin-right: 8px;
  width: calc(100% - 16px);
  padding-left: 8px;
  padding-right: 8px;
}

.my-app-bar :deep(.v-toolbar__prepend) {
  margin-left: 0;
}

.my-app-bar :deep(.v-toolbar__append) {
  margin-right: 0;
}
</style>
